import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './SendOutList.css'
import { Table,Input,Select ,Button} from 'antd';

const { TextArea } = Input;
const { Option } = Select;

function handleChange(value) {
    // console.log(`selected ${value}`);
  }
class orderDetails extends Component {
    constructor(props) {
        super(props);

    }
     //函数调用
    componentDidMount() {

    }

    
    render() {
        const columns = [
            {
              title: '操作者',
              dataIndex: 'username',
            },
            {
              title: '操作时间',
              dataIndex: 'username_time',
            },
            {
              title: '订单状态',
              dataIndex: 'state',
            },
            {
                title: '付款状态',
                dataIndex: 'pay_state',
              },
              {
                title: '发货状态',
                dataIndex: 'fahuo_state',
              },
              {
                title: '备注',
                dataIndex: 'note  ',
              }
          ];
        return (
            <div>
              <h2>订单详情</h2>
              <h3>基本信息</h3>
              <div>=====================</div>
              <div>
                <h5>订单编号:</h5>
                <h5>订单状态:</h5>
                <h5>购买用户:</h5>
                <h5>下单时间:</h5>
                <h5>支付方式:</h5> 
                <h5>付款时间:</h5>
                <h5>配送方式:</h5>
                <h5>发货时间:</h5>
                <h5>发货单号:</h5> 
              </div>
              <div>=====================</div>
              <div>
                  <h3>客户留言信息</h3>
                  <TextArea showCount maxLength={100} />
              </div>
              <div>=====================</div>
              <div>
                  <h3>收货人信息</h3>
                  <h4>姓名:</h4>
                  <h4>手机:</h4>
                  <h4>地址:</h4>
              </div>
              <div>======================</div>
              <div>
                  <h3>商品信息</h3>
              </div>
              <div>=======================</div>
              <div>费用信息</div>
              <div>可执行操作:
              <Select defaultValue="选择快递" onChange={handleChange}>
              <Option value="中通快递">中通快递</Option>
              <Option value="申通快递">申通快递</Option>
              <Option value="天天快递">天天快递</Option>
              <Option value="其他快递">其他快递</Option>
               </Select>
               <Input placeholder="请输入快递单号"  className="ant-input"/>
               <Button type="primary">一键发货</Button>
               <Button type="primary">生成发货单</Button>
               <Button type="primary">售后</Button>
               <Button type="primary">退款</Button>
               <Button type="primary">付款</Button>
               <Button type="primary">未付款</Button>
              </div>
              <div>
              <Table columns={columns} size="small" />
              </div>
            </div>
        );
    }
}

orderDetails.propTypes = {

};

export default orderDetails;